<template>
    <!--地图挂载dom-->
    <div id="map">
    </div>
</template>

<script>
    //引入依赖
    import Map from 'ol/Map';
    import View from 'ol/View';
    import Feature from 'ol/Feature';
    import GeoJSON from 'ol/format/GeoJSON';
    import {Fill, Stroke, Style, Text} from 'ol/style';
    import {OSM, Vector as VectorSource} from 'ol/source';
    import {Vector as VectorLayer} from 'ol/layer';
    import {Point} from 'ol/geom';
    import TileLayer from 'ol/layer/Tile'

    export default {
        name: 'VectorTextLayer',
        data() {
            return {}
        },
        mounted() {
            //矢量数据源
            const vectorSource = new VectorSource();
            let vectorLayer = new VectorLayer({
                source: vectorSource,
            })
            this.map = new Map({
                layers: [new TileLayer({
                    source: new OSM()//加载OpenStreetMap
                }), vectorLayer],
                target: 'map',
                view: new View({
                    center: [116.38916015624999, 39.926588421909436],
                    projection: "EPSG:4326", //指定投影
                    zoom: 4,
                }),
            });
            this.addFeatureStyle(vectorSource);
        },
        methods: {
            //给不同的要素设置不同的样式
            addFeatureStyle(vectorSource) {
                fetch('http://localhost:8888/openlayer/geojson/china.json')
                    .then(response => response.json())
                    .then((json) => {
                        console.log(json)
                        //读取geojson数据为要素数据
                        const features = new GeoJSON().readFeatures(json);
                        vectorSource.addFeatures(features);
                        for (const feature of features) {
                            //填充多边形
                            feature.setStyle(new Style({
                                stroke: new Stroke({
                                    color: 'magenta',
                                }),
                                fill: new Fill({color: "#4e98f444"}),
                            }));
                            //获取到中心位置与name属性值
                            let center = feature.get("centroid");
                            let name = feature.get("name");
                            if (center && name) {
                                //构建点要素
                                let pointFeature = new Feature({
                                    geometry: new Point(center), //几何信息
                                });
                                var style = new Style({
                                    //给点要素设置文本样式
                                    text: new Text({
                                        font: "18px sans-serif",//字体
                                        text: name, //文本内容,支持换行符\n,支持数组形式配置不同数据不同的样式，不吃富文本
                                        fill: new Fill({color: '#fff'}),//文本填充样式（即文字颜色）
                                        scale: 1,
                                        offsetX: 10,//水平方向偏移
                                        offsetY: 10,//垂直方向偏移
                                        overflow: false,//是否允许placement为line模式下的线或者面的情况下允许文字超出的范围，或者是线的延长的长度
                                        placement: 'point',
                                        textBaseline: "top",
                                        stroke: new Stroke({
                                            color: "#000"
                                        }),
                                        backgroundFill: new Fill({//背景设置必须是placement为point的形式
                                            color: "#f00"
                                        }),
                                        backgroundStroke: new Stroke({
                                            color: "#000"
                                        })
                                    }),
                                    zIndex: 9999
                                });
                                pointFeature.setStyle(style)
                                vectorSource.addFeature(pointFeature);
                            }
                        }
                        this.map.getView().fit(vectorSource.getExtent());
                    });
            }
        }
    }
</script>

<style scoped>
    #map {
        width: 100%;
        height: 100%;
    }
</style>
